/*
 * 选择框组件
 */
const selectTemplate = `
<div class="select">
<div class="input" @click="openValue">
  <input id="selectVal" v-model="content" type="text" placeholder="请点击选择">
  <span class="tri" :class="{tri_up: show}"></span>
</div>
<div class="list" v-show="show">
  <ul>
    <li @click="getvalue(item)" v-for="(item,index) in listData" :key="item.index">{{ item.name }}</li>
  </ul>
</div>
</div>
`;
Vue.component("my-select", {
  template: selectTemplate,
  props: ["options", "value"],
  // TODO 请在此继续完成组件代码的编写
  data() {
    return {
      listData: [],
      show: false,
      content: "",
    };
  },
  watch: {
    value() {
      this.setContent();
    },
  },
  mounted() {
    this.options && (this.listData = this.options);
    this.setContent();
  },
  methods: {
    setContent() {
      const index = this.listData.findIndex((x) => x.label == this.value);
      this.content = this.listData[index].name;
    },
    getvalue(item) {
      this.$emit("input", item.label);
      this.show = false;
    },
    openValue() {
      this.show = !this.show;
    },
  },
});
